<template>
  <div class="goods-audit">
    <el-form class="boss-form" inline ref="form">
      <el-form-item label="商品名称">
        <el-input class="boss_input" v-model="auditData.search.goodsName" placeholder="请输入商品名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <Button label="重置" @click="onResetClick" />
        <Button label="搜索" type="primary" @click="onSearchClick" />
      </el-form-item>
    </el-form>

    <div class="outerTable">
      <el-tabs v-model="auditData.search.auditStatus" type="card" @tab-click="onTabClick">
        <el-tab-pane label="待审核" name="AUDITING"></el-tab-pane>
        <el-tab-pane label="已通过" name="PASS"></el-tab-pane>
        <el-tab-pane label="已驳回" name="REJECTED"></el-tab-pane>
      </el-tabs>

      <div class="audit-button" v-if="auditData.search.auditStatus === 'AUDITING'">
        <Button label="批量通过" @click="onPassClick" :disabled="auditData.multipleSelection.length === 0" />
        <Button label="批量驳回" @click="onRejectedClick" :disabled="auditData.multipleSelection.length === 0" />
        <Button label="导出" plain :disabled="auditData.multipleSelection.length === 0" @click="onAllExportClick" />
      </div>
      <el-table ref="tableRef" :height="tableHeight" :data="auditData.list" @selection-change="onSelectionChange" v-loading="loading">
        <el-table-column fixed="left" type="selection" width="50"></el-table-column>
        <el-table-column fixed="left" type="index" label="#" width="50"></el-table-column>
        <el-table-column label="商品主图">
          <template #default="scope">
            <img :src="scope.row.goodsImg.split(',')[0]" />
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column label="商品类别">
          <template #default="scope">
            {{ scope.row.goodsCatNameFirst + '/' + scope.row.goodsCatNameSecond + '/' + scope.row.goodsCatNameThird }}
          </template>
        </el-table-column>
        <el-table-column prop="supplierName" label="供应商名称"> </el-table-column>
        <el-table-column prop="goodsType" label="类目" :formatter="(row, column, cellValue, index) => $formater.formaterGoodsType(cellValue)" />
        <el-table-column v-if="auditData.search.auditStatus === 'REJECTED'" label="驳回原因">
          <template #default="scope">
            {{ scope.row.refuseReason }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130">
          <template #default="scope">
            <Link label="审核" v-if="auditData.search.auditStatus === 'AUDITING'" @click="onAuditDetailClick(scope.row)" />
            <Link v-else label="查看" @click="onDetailClick(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <Pager :page="auditData.search.page" :pageSizes="auditData.search.pageSizes" :total="auditData.total" :limit="auditData.search.limit" @current-change="onCurrentChange" @size-change="onSizeChange" />
    </div>

    <Reject v-model:visible="rejectVisible" @change="onRejectChange" />
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '@/api'
import consts from '@/consts'
import formater from '@/formater'
import { calcTableHeight } from '@/assets/js/utils.js'
import Link from '@/components/button/link.vue'
import Button from '@/components/button/button.vue'
import Pager from '@/components/pager/index.vue'
import Reject from '@/components/reject/index.vue'

const router = useRouter()

const { tableRef, tableHeight } = calcTableHeight()

const auditData = reactive({
  total: 0,
  list: [],
  search: {
    page: 1,
    limit: consts.Limit,
    pageSizes: consts.PageSize,
    auditStatus: 'AUDITING',
    goodsName: ''
  },
  multipleSelection: []
})
const loading = ref(false)
const rejectVisible = ref(false)

const loadData = async () => {
  loading.value = true
  let { data, err } = await api.get('/medinstrument/boss/goods/auditList', auditData.search)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    auditData.list = data.list
    auditData.total = data.count
  }
}
const audit = async (operateType, goodsIds, remark) => {
  let { err } = await api.post(`/medinstrument/boss/goods/batchAuditGoods?goodsIds=${goodsIds}&operateType=${operateType}&remark=${remark}`)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
    ElMessage.success('商品审核成功')
  }
}

const onTabClick = (tab) => {
  auditData.search.auditStatus = tab.props.name
  loadData()
}

const onSearchClick = () => {
  auditData.search.page = 1
  loadData()
}

const onResetClick = () => {
  auditData.search = {}
  loadData()
}

const onSelectionChange = (val) => {
  auditData.multipleSelection = val
}

const onPassClick = () => {
  let goodsId = auditData.multipleSelection.map((e) => e.goodsId).join(',')
  audit('PASS', goodsId, '')
}

const onRejectedClick = () => {
  rejectVisible.value = true
}

const onRejectChange = (val) => {
  let goodsIds = auditData.multipleSelection.map((e) => e.goodsId).join(',')
  audit('REJECT', goodsIds, val)
}

const onAllExportClick = () => {
  let goodsId = auditData.multipleSelection.map((e) => e.goodsId).join(',')
  api.download(`/medinstrument/boss/exportExcel/exportCheckGoods?goodsIds=${goodsId}`)
}

const onDetailClick = (row) => {
  let { href } = router.resolve({
    path: `/goods/goodsDetail/${row.goodsId}`
  })
  window.open(href, '_blank')
}
const onAuditDetailClick = (row) => {
  let { href } = router.resolve({
    path: `/goods/audit/goodsDetail/${row.goodsId}`
  })
  window.open(href, '_blank')
}

const onCancelClick = () => {
  rejectVisible.value = false
}

const onCurrentChange = (val) => {
  auditData.search.page = val
  loadData()
}

const onSizeChange = (val) => {
  auditData.search.limit = val
  loadData()
}

onMounted(() => {
  loadData()
})
</script>
<style scoped>
.audit-button {
  margin: 10px 0;
}

img {
  width: 70px;
  height: 70px;
}
</style>
